/*
 * @Author: xiaosihan 
 * @Date: 2023-08-06 18:51:57 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-03-16 15:58:42
 */

.sticker {
    position: relative;
    width: 320px;
    height: 93%;

    .infiniteScroll {
        width: calc(100% - 10px);
        padding-left: 10px;
    }

    .btn {
        padding: 0 12px;

        :global {
            .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
                color: #fd7901 !important;
            }

            .ant-tabs-tab:hover {
                color: #fd7901 !important;
            }

            .ant-tabs-ink-bar {
                background-color: #fd7901 !important;
            }
        }

    }

    .stickerGroup {
        margin: 10px;

        :global {
            .ant-select-focused {
                .ant-select-selector {
                    border-color: #fd7901 !important;
                    box-shadow: 0 0 0 2px rgb(255 84 5 / 10%) !important;
                }
            }

            .ant-select:hover {

                .ant-select-selector {
                    border-color: #fd7901 !important;
                    box-shadow: 0 0 0 2px rgb(255 84 5 / 10%) !important;
                }
            }

        }

        .label {
            display: inline-block;
            width: 40px;
        }

    }

    .stickerList {
        width: 320px;
        height: calc(100% - 50px);

        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: rgba(0, 0, 0, 0);
        }

        &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0);
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #1890ff;
        }



    }

    .sticker_item {
        display: inline-block;
        width: 50%;
        text-align: left;
        position: relative;

        .colectionHover {
            display: none;
        }

        &:hover .colectionHover {
            display: block;
        }

        .img {
            width: 145px;
            height: 145px;
            cursor: pointer;
            border-radius: 12px;
            object-fit: contain;
            border-radius: 4px;
            border: 1px solid #cccccc;
            background-color: #d5d5d5;

            &:hover {
                border-color: #fd7901 !important;
            }
        }
    }
}